<template>
  <div ref="toplogo">
    <div class="screenTit">
      <span class="name">中大门国际物流服务有限公司大数据平台</span>
      <div class="time-area">
        <span class="time">
          <span>{{nowDate}}</span>
          <span>{{nowWeek}}</span>
          <span>{{nowTime}}</span>
        </span>
        <span class="area">
          <i class="ico">
            <img src="../../../../static/img/weizhi.png" alt="">
          </i>
          <span class="text">郑州</span>
        </span>
        <span class="tianqi"   v-if="weather != null">{{ weather.info + " " + weather.temp + " " + weather.wind}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
  export default {
    name: 'toplogo',
    components: {

    },
    data() {
      return {
        nowWeek: '',
        nowDate: '',
        nowTime: '',
        weather:null,
        weatherUrl:"http://192.168.103.191:9999/weather",
      }
    },
    mounted() {
    
    var self = this
    $.get(this.weatherUrl, (data)=>{
      if (data.code == 200) {
          self.weather = data.data
      }  else {
         self.weather = null
      }
    })
      this.timer = setInterval(() => {
        this.setNowTimes()
      }, 1000)
    },
    methods: {
      setNowTimes () {
        let myDate = new Date()
        // console.log(myDate)
        let wk = myDate.getDay()
        let yy = String(myDate.getFullYear())
        let mm = myDate.getMonth() + 1
        let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
        let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
        let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
        let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let week = weeks[wk]
        this.nowDate = yy + '年' + mm + '月' + dd +'日'
        this.nowTime = hou + ':' + min + ':' + sec
        this.nowWeek = week
      },
    }
  }
</script>

<style>
  .screenTit {
    width: 100%;
    height: 0.72rem;
    display: block;
    /* align-items: center; */
    justify-content: center;
    position: relative;
    background: url(../../../../static/img/din.png) no-repeat center top;
    background-size: 100%;
    padding-left: 36%;

  }

  .screenTit .name {
    background-image: -webkit-linear-gradient(top, #d0e6fe, #48c5f5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 0.72rem;
    font-size: .22rem;
    font-weight: bolder;
    letter-spacing: .03rem;
  }

  .time-area {
    position: absolute;
    right: 3%;
    top: 0;
    height: 0.72rem;
    top:.1rem;
    font-size:.14rem;
    padding-right:.2rem;
    color: #fff;
  }

  .screenTit .name {

    margin: 0 auto;

  }

</style>